<template>
  <div :class="{mIneListHeightCell:name === '我的订单' ,mIneListCell:name !== '我的订单'}" @click="clickAction">
    <div :class="{mediumTitle:name === '我的订单' ,title:name !== '我的订单'}">{{ name }}</div>
    <img :src="sqkp" v-if="name === '申请开票'" />
    <img :src="wdxx" v-else-if="name === '我的消息'" />
      <img :src="wddd" v-else-if="name === '我的订单'" />
      <img :src="shezhi" v-else-if="name === '设置'" />
    <img :src="tsjy" v-else-if="name === '投诉建议'" />
    <div class="line" v-show="showLine"></div>
  </div>
</template>

<script>
export default {
  name: "MIneListCell",
  props: {
    name: String,
    clickAction: Function,
      showLine:Boolean
  },
  data() {
    return {
      shezhi: require("@/images/icon/mine/shezhi.png"),
      sqkp: require("@/images/icon/mine/sqkp.png"),
      wdxx: require("@/images/icon/mine/wdxx.png"),
        wddd: require("@/images/icon/mine/wddd.png"),
        tsjy: require("@/images/icon/mine/tsjy.png")


    };
  }
};
</script>

<style scoped>

.mIneListCell {
  height: 3.6666666666666665rem;
  position: relative;
  display: flex;
  align-items: center;
}

.mIneListHeightCell {
    height: 5rem;
    position: relative;
    display: flex;
    align-items: center;
}
.mediumTitle{
    margin-left: 2rem;
    height: 3.6666666666666665rem;
    font-size: 0.95rem;
    font-family: "PingFangSC-Medium";
    color: #121C32;
    line-height: 3.6666666666666665rem;
}
.title {
  margin-left: 2rem;
  height: 3.6666666666666665rem;
  font-size: 0.95rem;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 3.6666666666666665rem;
}
img {
  width: 1.4666666666666666rem;
  height: 1.4666666666666666rem;
  position: absolute;
  right: 2rem;
}
.line {
  position: absolute;
  left: 2rem;
  right: 2rem;
  height: 0.06666666666666667rem;
  bottom: 0rem;
  background-color: #f0f1f5;
}
</style>
